<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.1)"
    class="w100p h100p"
    ref="contrast"
  ></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    CID: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      dayTime: [
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00",
        "01:00"
      ],
      dataNum: ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"],
      series: [],
      title: [],
      colors: ["#FF8787", "#6DD4EF", "#66B1FF", "#34C724", "#7F3BF5", "#FFC474", "#2F5794"]
    };
  },
  methods: {
    getData() {
      var param = {
        CID: this.CID
      };
      var params = JSON.stringify(param);
      this.loading = true;
      this.$api.home
        .pass_type_day_cid(params)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.dayTime = res.names;
            var dataList = res.data;
            for (var key in dataList) {
              this.title.push(key);
              this.series.push({
                type: "line",
                name: key,
                symbole: "circle",
                symbolSize: 6,
                areaStyle: {},
                data: dataList[key],
                emphasis: {
                  label: {
                    show: true
                  }
                },
                barWidth: "16px",
                itemStyle: {
                  normal: {
                    // color:"#2F88FC",
                    barBorderRadius: [40, 40, 0, 0] //圆角大小
                  }
                },
                lineStyle: {
                  width: 2
                },
                label: {
                  normal: {
                    show: false,
                    fontSize: 16,
                    fontWeight: "bold",
                    color: "#00FFFF",
                    position: "top"
                  }
                }
              });
            }
          } else {
            this.loading = false;
          }
          this.echarth();
        })
        .catch((err) => {
          this.loading = false;
          // this.$message.error("服务器连接失败，请稍后再试");
          this.echarth();
        });
    },
    echarth() {
      let myChart = this.$echarts.init(this.$refs.contrast);
      let option = {
        color: this.colors,

        legend: {
          data: this.title,
          selected: {
            所有人员: false
          },
          width: 600,
          right: 65,
          top: 40,
          bottom: 40,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 15,
          icon: "roundRect"
        },
        grid: {
          top: "100",
          right: "40",
          left: "60",
          bottom: "40" //图表尺寸大小
        },
        xAxis: [
          {
            name: "时间",
            nameTextStyle: {
              color: "#fff"
            },
            type: "category",
            color: "#59588D",
            data: this.dayTime,
            axisLabel: {
              margin: 10,
              color: "#fff",
              textStyle: {
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(107,107,107,0.37)"
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: "次",
            nameTextStyle: {
              color: "#fff"
            },
            axisLabel: {
              // formatter: "{value}%",
              color: "#999",
              textStyle: {
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: "rgba(107,107,107,0.37)"
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "rgba(131,101,101,0.2)",
                type: "dashed"
              }
            }
          }
        ],
        series: this.series
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.getData();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.contrast).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  }
};
</script>

<style>
/* div{
  color: #56e7d4;
} */
</style>